<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="keywords" content=""><!--SEO关键字-->
<meta name="description" content=""><!--SEO描述-->
<link rel ="" href=""><!--选项卡图标-->
<title></title>
<link rel="stylesheet" href="/css/base.css">
<link rel="stylesheet" href="/css/common.css">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/jquery-1.7.2.min.js"></script>
<script src="/js/script.js"></script>
<script type=text/javascript src="/js/jquery.jqzoom.js"></script>
<script type=text/javascript src="/js/jquery.livequery.js"></script>
<script src="/js/responsiveslides.min.js"></script>
<!--[if ie 6]>
<link rel="stylesheet" href="css/ie6.css">
<script type="text/javascript" src="js/DD_belatedPNG.js" ></script>
<script type="text/javascript">
DD_belatedPNG.fix('.png');/*在需要png透明的元素里面加上.png样式即可（class="png"）*/
</script>
<![endif]-->
</head>

<body class="bg_img">
	
	<div class="header h100 w960 bc"><?php head();?></div>
	
	<script type="text/javascript">
		// 图片放大镜
		$(function(){
		    
		    /* 鼠标移动小图，小图对应大图显示在大图上，并替换放大镜中的图*/
		    $("#specList ul li img").livequery("mouseover",function(){ 
		        var imgSrc = $(this).attr("src");
		        var i = imgSrc.lastIndexOf(".");
		        var unit = imgSrc.substring(i);
		        imgSrc = imgSrc.substring(0,i);
		        var imgSrc_small = $(this).attr("src_D");
		        var imgSrc_big = $(this).attr("src_H");
		        $("#bigImg").attr({"src": imgSrc_small ,"jqimg": imgSrc_big });
		        $(this).css({"border":"2px solid #3399cc","padding":"1px"});
		    });
		    
		    $("#specList ul li img").livequery("mouseout",function(){ 
		        $(this).css({"border":"1px solid #ddd","padding":"2px"});
		    });
		    
		    //使用jqzoom
		    $(".jqzoom").jqueryzoom({
		        xzoom: 300, //放大图的宽度(默认是 200)
		        yzoom: 300, //放大图的高度(默认是 200)
		        offset: 10, //离原图的距离(默认是 10)
		        position: "right", //放大图的定位(默认是 "right")
		        preload:1   
		    });
		    
		    /*如果小图过多，则出现滚动条在一行展示*/
		    var btnNext = $('#specRight');
		    var btnPrev = $('#specLeft')
		    var ul = btnPrev.next().find('ul');

		    var len = ul.find('li').length;
		    var i = 0 ;
		    if (len > 5) {
		        $("#specRight").addClass("specRightF").removeClass("specRightT");
		        ul.css("width", 54 * len)
		        btnNext.click(function(e) {
		            if(i>=len-5){
		                
		                return;
		            }
		            i++;
		            if(i == len-5){
		                $("#specRight").addClass("specRightT").removeClass("specRightF");
		            }
		            $("#specLeft").addClass("specLeftF").removeClass("specLeftT");
		            moveS(i);
		        })
		        btnPrev.click(function(e) {
		            if(i<=0){
		                return;
		            }
		            i--;
		            if(i==0){
		                $("#specLeft").addClass("specLeftT").removeClass("specLeftF");
		            }
		            $("#specRight").addClass("specRightF").removeClass("specRightT");
		            moveS(i);
		        })
		    }
		    function moveS(i) {
		        ul.animate({left:-54 * i}, 500)
		    }
		    function picAuto(){
		      if ($(".listImg li").size()<=5) {
		        $("#specLeft,#specRight").hide();
		      }
		    }
		    picAuto();
		});	    
	</script>

	<div class="w960 bc oh">
		<div id="preview">
			<div class=jqzoom>
				<img id=bigImg src="/<?php echo $image[0]['path'];?>" width=310 height=310 jqimg="/<?php echo $image[0]['path'];?>">
			</div>
			<div id=spec>
				<div id="specLeft" class="control specLeftT oh"></div>
				<div id="specList">
					<ul class="listImg">
						<?php 
						for($m=0;$m < count($image);$m++){
							echo '<li><img id="smallPicOne" src="/'.$image[$m]['path'].'" src_H="/'.$image[$m]['path'].'" src_D="/'.$image[$m]['path'].'">  </li>';
						}
						?>
					 </ul>
				</div>
				<div id="specRight" class="control specRightT oh"></div>
			</div>
		</div><!-- preview end -->

		<div class="goods_form fr">
			<p class="f20 fb"><?php echo $info['name'];?></p>
			<p class="f12 c999"><?php echo $info['remark'];?></p>
			<p class="f20 fb chot good_price">￥<?php echo $info['price'];?></p>
			<input type="hidden" id="good_price" value="<?php echo $info['price'];?>">
			<input type="hidden" id="good_number" value="<?php echo $info['p_id'];?>">
			<p class="f12 c999">适合机型：	<span><?php echo $info['model'];?></span></p>
			<p class="f12 c999 choice_color">选择颜色：
				<?php 
				for($n = 0;$n < count($color);$n++){
					$data = $color[$n]['color'];
					$href = $color[$n]['p_id'];
					if($href == $info['p_id'])echo "<a href='$href'><span class='good_select'>$data</span></a>";
					else echo "<a href='$href'><span>$data</span></a>";
					}
				?>
				</p>
			<p class="f12 c999">购买数量：
				<select name="goods_numSelect" id="goods_numSelect">
					<option value="1" selected="selected">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
					<option value="4">4</option>
					<option value="5">5</option>
					<option value="6">6</option>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
				</select>
			</p>
			<div class="common_bg good_add mt20">
				<p class="f12 c999">已选择：<?php echo $info['name'];?> <span class="buy_num chot">1</span> 件 总计：￥<span class="buy_price"><?php echo $info['price'];?></span></p>
				<p><input type="submit" class="submit cart_in" value="加入购物车"></p>
			</div>
		</div><!-- goods_form -->
	</div>

	<div class="w960 bc oh mt30">
		<ul id="menu" class="menu oh db">
			<li class="active"><a href="#description">产品简介</a></li>
			<li><a href="#usage">规格参数</a></li>
			<li><a href="#howbuy">如何购买</a></li>
			<li><a href="#shouhou">售后服务</a></li>
		</ul>
		<div id="description" class="content">
			<?php echo $info['info'];?>
		</div>
		<div id="usage" class="content">
			<?php echo $info['specification'];?>
		</div>
		<div id="howbuy" class="content">
			<h2>如何购买</h2>
			<p>
				Let my viciousness be emptied,<br />
			    Desire and lust banished,<br />
			    Charity and patience,<br />
			    Humility and obedience,<br />
			    And all the virtues increased.
			</p>
		</div>
		<div id="shouhou" class="content">
			<h2>售后服务</h2>
			<p>
				Let my viciousness be emptied,<br />
			    Desire and lust banished,<br />
			    Charity and patience,<br />
			    Humility and obedience,<br />
			    And all the virtues increased.
			</p>
		</div>

	</div>

	

	<div class="footer w960 bc">
		<div class="footerinfo fl mt20 pb20">
			<p class="f12">友情链接： <a href="#">小米科技 </a>&nbsp;&nbsp;<a href="#">魅族科技</a>&nbsp;&nbsp;<a href="#">360手机</a>&nbsp;&nbsp;<a href="#">到会网</a></p>
			<p class="f12">友情链接： <a href="#">关于我们</a>&nbsp;&nbsp;<a href="#">工作机会</a>&nbsp;&nbsp;<a href="#">联系我们</a></p>
			<p class="f12">Copyright ? 2012 Speed Co., Ltd. All rights reserved. 经营许可证编号： 粤B2-20050367</p>
		</div>
		<div class="phone400 fl png"></div>
		<div class="service fl pf fixed-bottom"><a href="#" class="dib png"></a></div>
	</div>
</body>
</html>